<template>
<div class="customWeb">
    <a-layout>
        <a-layout-header>
            <div class="customWebHeader">
                <div class="customWebTitle">
                    <a-icon class="toolIcon" type="arrow-left" @click="goBack"/>
                    <span>{{`编辑自定义页面:${this.name}`}}</span>
                </div>
                <div class="customWebHeaderTool">
                    <el-button type="primary" @click="saveFormData">保存</el-button>
                    <el-button @click="cancelForm">取消</el-button>
                </div>
            </div>
        </a-layout-header>
        <a-layout>
            <a-layout-sider>
                <div class="customMenu">
                    <div :key="mf.id" v-for="mf in menuConfig" class="customMenuItem" @click="selectComponent(mf)">
                        <a-icon :type="mf.icon" />
                        <span>{{mf.label}}</span>
                    </div>
                </div>
            </a-layout-sider>
            <a-layout-content>
                <grid-content :gridItemConfig="gridItemConfig" :staticGrid="false" @clickSetting="clickSetting" @delete="deleteComponent" ref="gridContent"></grid-content>
            </a-layout-content>
        </a-layout>
    </a-layout>
    <sceen3d-setting :visible="settings.sceen3d.visible" v-if="settings.sceen3d.visible" :model="settings.sceen3d.model" :config="settings.sceen3d.config" @close="closeGridItem" @save="saveGridItem"></sceen3d-setting>
    <chart-setting :visible="settings.chart.visible" v-if="settings.chart.visible" :model="settings.chart.model" :config="settings.chart.config" @close="closeGridItem" @save="saveGridItem"></chart-setting>
    <sceen2d-setting :visible="settings.sceen2d.visible" v-if="settings.sceen2d.visible" :model="settings.sceen2d.model" :config="settings.sceen2d.config" @close="closeGridItem" @save="saveGridItem"></sceen2d-setting>
    <sceenEarth-setting :visible="settings.sceenEarth.visible" v-if="settings.sceenEarth.visible" :model="settings.sceenEarth.model" :config="settings.sceenEarth.config" @close="closeGridItem" @save="saveGridItem"></sceenEarth-setting>
    <url-iframe-setting :visible="settings.urlIframe.visible" v-if="settings.urlIframe.visible" :model="settings.urlIframe.model" :config="settings.urlIframe.config" @close="closeGridItem" @save="saveGridItem"></url-iframe-setting>
    <url-button-setting :visible="settings.urlButton.visible" v-if="settings.urlButton.visible" :model="settings.urlButton.model" :config="settings.urlButton.config" @close="closeGridItem" @save="saveGridItem"></url-button-setting>
</div>
    
    
</template>

<script>
import gridContent from "./content.vue"
import VueGridLayout from 'vue-grid-layout';
import customComponents from './components/container.vue'
import sceen3dSetting from './setting/sceen3DSetting.vue'
import sceen2dSetting from './setting/sceen2DSetting.vue'
import sceenEarthSetting from './setting/sceenEarthSetting.vue';
import chartSetting from './setting/chart/index.vue'
import urlIframeSetting from "./setting/urlIframeSetting.vue"
import urlButtonSetting from "./setting/urlButtonSetting.vue"
import { getCustomWebData, updateCustomWeb } from "@/api/customWeb"
import { getSizeAndPosition } from "./CUSTOMWEB_PARAMS"
export default {
    components: {
           GridLayout: VueGridLayout.GridLayout,
           GridItem: VueGridLayout.GridItem,
           customComponents,
           sceen3dSetting,
           sceen2dSetting,
           sceenEarthSetting,
           chartSetting,
           gridContent,
           urlIframeSetting,
           urlButtonSetting
       },
    data () {
        return {
            name: '',
            menuConfig: [
                {
                    id: 'chart',
                    icon: 'area-chart',
                    label: '统计图'
                },{
                    id: 'sceen2d',
                    icon: 'gold',
                    label: '2D地图场景'
                },{
                    id: 'sceen3d',
                    icon: 'gold',
                    label: '3D小场景'
                },{
                    id: 'sceenEarth',
                    icon: 'gold',
                    label: 'Earth'
                },{
                    id: 'urlIframe',
                    icon: 'gold',
                    label: '嵌入URL'
                },{
                    id: 'urlButton',
                    icon: 'gold',
                    label: '地址链接'
                }
            ],
            gridItemConfig: [],
            settings:{
                sceen3d:{
                    visible: false,
                    model: 'create', //'update'
                    config: null
                },
                chart: {
                    visible: false,
                    model: 'create', //'update'
                    config: null
                },
                sceen2d:{
                    visible: false,
                    model: 'create', //'update'
                    config: null
                },
                sceenEarth:{
                    visible: false,
                    model: 'create', //'update'
                    config: null
                },
                urlIframe: {
                    visible: false,
                    model: 'create', //'update'
                    config: null
                },
                urlButton: {
                    visible: false,
                    model: 'create', //'update'
                    config: null
                }
            },
        }
    },
    async mounted(){
        let result = await getCustomWebData({id: this.worksheetId})
        if(result){
            this.name = result.name
            if('config' in result && result.config !== ''){
                let config = JSON.parse(result.config);
                this.gridItemConfig = config
            }
        }
    },
    computed:{
        worksheetId(){
            return this.$route.params.worksheetId
        },
        groupId(){
            return this.$route.params.groupId
        },
        appId(){
            return this.$route.params.appId
        }
    },
    methods:{
        goBack(){
            this.$router.go(-1);
        },
        goToWeb(){
            this.$router.push(`/app/${this.appId}/${this.groupId}/${this.worksheetId}`)
        },
        createId(){
            return Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
        },
        createGridItem(params){
            let type = params.type
            let sp = getSizeAndPosition(type) 
            this.gridItemConfig.push({"x": sp.x,"y": sp.y,"w": sp.w,"h": sp.h, 'i': params.id, config: params})
        },
        async saveFormData(){
            let gridItemConfig = this.$refs.gridContent.getGridItemConfig()
            let params = {
                id: this.worksheetId,
                name: this.name,
                appId: this.appId,
                groupId: this.groupId,
                config: JSON.stringify(gridItemConfig),
                type: 1
            }
            let result = await updateCustomWeb(params)
            if(result){
                this.$message.success('提交成功');
                this.goToWeb()
            } else {
                this.$message.warn('提交失败')
            }
        },
        cancelForm(){
            this.goToWeb()
        },
        getGridItemById(id){
            let gridItem = null;
            for(let i = 0; i < this.gridItemConfig.length; i++){
                if(this.gridItemConfig[i].i === id){
                    gridItem = this.gridItemConfig[i]
                }
            
            }
            return gridItem
        },
        closeGridItem(type){
            this.settings[type] = {
                visible: false,
                model: 'create',
                config: null
            }
        },
        saveGridItem(type, model, params){
            params['type'] = type;
            let config = JSON.parse(JSON.stringify(params))
            if(model === 'create'){
                this.createGridItem(config)
            } else if(model === 'update'){
                let gridItem = this.getGridItemById(config.id)
                gridItem.config = config
            }
            
        },
        selectComponent(config){
            if(config.disabled) return;
            let id = config.id
            this.settings[id] = {
                visible: true,
                model: 'create',
                config: null
            }
        },
        clickSetting(config){
            this.settings[config.type] = {
                visible: true,
                model: 'update',
                config: JSON.parse(JSON.stringify(config))
            }
        },
        deleteComponent(config){
            let id = config.id;
            let index = -1
            for(let i = 0; i < this.gridItemConfig.length; i++){
                if(this.gridItemConfig[i].i === id){
                    index = i
                }
            
            }
            if(index > -1){
                this.gridItemConfig.splice(index, 1)
            }
        },
    }
}
</script>

<style scoped lang="less">

@fontColor_1: #333333;
.customWeb{
    height: 100%;
}
.customWeb .customMenu{
    padding: 10px;
    color: @fontColor_1;
    font-size: 14px;
}
.customWeb .customMenu .customMenuItem:hover{
    background: rgb(245, 245, 245);
}
.customWeb .customMenu .customMenuItem{
    line-height: 44px;
    cursor: pointer;
}
.customWeb .customMenu .customMenuItem i{
    margin: 6px;
}
.customWeb .customWebHeader{
    color: @fontColor_1;
}
.customWebHeader .customWebTitle{
    display: inline-block;
    font-size: 25px;
}
.customWebHeader .customWebHeaderTool{
    display: inline-block;
    float: right;
}

.customWebHeader .customWebTitle .toolIcon{
    margin-right: 10px;
    cursor: pointer;
}

.customWebHeader .customWebTitle .toolIcon:hover{
    color: #5cb6ff;
}

</style>
<style>
.customWeb{
    font-family: Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif !important;
}
.customWeb .ant-layout{
    height: 100%;
    background: unset;
}
.customWeb .vue-grid-item>.vue-resizable-handle{
    z-index: 9999;
}
.customWeb .ant-layout-header{
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
}
.customWeb .ant-layout-sider{
    background: #fff;
    border-right: 1px solid #e0e0e0;
}
.customWeb .ant-layout-content{
    /* padding: 10px; */
    background: #f5f5f5;
}

.customWeb .el-dialog__header, .customWeb .el-dialog__body, .customWeb .el-dialog__footer{
    background: #fff;
}
.customWeb .el-dialog__body{
    height: calc( 100% - 55px );
}
.customWeb .el-dialog__header{
    border-bottom: 1px solid #e0e0e0;
}

.customWeb .el-dialog__header .el-dialog__title, .customWeb .el-dialog__body .el-form-item__label{
    color: #333333 !important;
}
.customWeb .el-dialog input{
    color: #333333 !important;
}
</style>
